import type { Directive, DirectiveBinding } from 'vue';

interface ElType extends HTMLElement {
  __handleClick__: () => any;
}
const clickOutside: Directive = {
  mounted(el: ElType, binding: DirectiveBinding) {
    const bundFn = (e: Event) => {
      if (el === e.target || el.contains(e.target)) {
        return false
      } else {
        binding.value(e)
      }
    }
    document.addEventListener("click", bundFn);
  },
  beforeUnmount(el: ElType) {
    const bundFn = (e: Event) => {
      if (el === e.target || el.contains(e.target)) {
        return false
      }
    }
    document.removeEventListener("click", bundFn);
  }
}


export default clickOutside;
